<!--
 * @Author: aliyun3129073295 1718324422@qq.com
 * @Date: 2022-10-24 14:09:48
 * @LastEditors: zhuxin xu
 * @LastEditTime: 2022-12-19 11:35:25
 * @FilePath: \xu_vue\src\view\userManagement\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="input">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item class="label" :label="$t('menus.console')">
          <el-input class="inputOne" v-model="input" placeholder="请输入微信昵称//手机号"></el-input>
        </el-form-item>
        <el-form-item class="labelOne" label="入驻时间：">
          <el-date-picker v-model="value" type="date" placeholder></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search">搜索</el-button>
          <el-button type="primary" class="reset" @click="reset">重置</el-button>
          <el-button type="primary" class="download">下载</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table border :data="tableData">
        <el-table-column prop="serialno" label="序号" width="234">
          <template slot-scope="scope">
            <TargetPeople :TargetPeople="scope.row.serialno" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="微信昵称" width="234">
          <template slot-scope="scope">
            <Group :Group="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="234">
          <template slot-scope="scope">
            <StrateStatus :Status="scope.row.phone" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="职位数量" width="234">
          <template>的方法规范的</template>
        </el-table-column>
        <el-table-column prop="orderreceiving" label="接单数量" width="234">
          <template slot-scope="scope">
            <Time :Time="scope.row.orderreceiving" />
          </template>
        </el-table-column>
        <el-table-column prop="signup" label="报名次数" width="234">
          <template slot-scope="scope">
            <NoticeStatus :Status="scope.row.signup" />
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="234" fixed="right">
          <template slot-scope="scope">
            <div class="sdahkds" @click="save(scope)">保存</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="left" @click="reduce">上一页</div>
      <div class="middle">
        <span>{{currentPage}}</span>
        /{{totalPage}}
      </div>
      <div class="right" @click="add">下一页</div>
    </div>
    <NoticeTips @cancel="cancel" @ok="ok" :show="show" :title="title" />
  </div>
</template>
<script>
import NoticeTips from "./components/NoticeTips.vue";
import NoticeStatus from "./components/NoticeStatus.vue";
import Time from "./components/Time.vue";
import TargetPeople from "./components/TargetPeople.vue";
import Group from "./components/Group.vue";
import StrateStatus from "./components/StrategyStatus.vue";
var moment = require("moment");
// import { reqA } from '@/api';
export default {
  components: {
    StrateStatus,
    Group,
    TargetPeople,
    Time,
    NoticeStatus,
    NoticeTips
  },
  name: "userManagement",
  data() {
    return {
      show: false,
      input: "",
      value: "",
      title: "",
      currentPage: 1,
      totalPage: 5,
      tableData: [
        {
          serialno: "",
          name: "王小虎",
          phone: 2,
          title: "111",
          orderreceiving: "2028-04-04T16:00:00.000Z",
          signup: "0",
          action: "编辑通知"
        },
        {
          serialno: "1",
          name: "王小虎",
          phone: 1,
          title: "3479824",
          orderreceiving: "",
          signup: "1",
          action: "编辑通知"
        },
        {
          serialno: "1",
          name: "未分组",
          phone: 3,
          title: "失效通知",
          orderreceiving: "2028-04-04T16:00:00.000Z",
          signup: "0",
          action: "编辑通知"
        },
        {
          serialno: "1",
          name: "王小虎",
          phone: 0,
          title: "3479824",
          orderreceiving: "2028-04-04T16:00:00.000Z",
          signup: "1",
          action: "生效通知"
        }
      ]
    };
  },
  methods: {
    save(scope) {
      this.show = true;
      this.title = scope.row.title;
    },
    ok(title) {
      console.log(title);
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    //分页部分方法
    reduce() {
      if (this.currentPage == 1) return;
      this.currentPage -= 1;
    },
    add() {
      if (this.totalPage == this.currentPage) return;
      this.currentPage += 1;
    },
    //搜索部分方法
    //重置
    reset() {
      this.input = "";
      this.value = "";
    }
  },

  created() {
    this.tableData.forEach(item => {
      item.time = moment(new Date()).format("YYYY/MM/DD HH:mm:ss");
      // item.serialno = index + 1;
    });
  }
};
</script>

<style scoped>
.input {
  width: 100%;
  display: flex;
  justify-self: start;
}
.inputOne {
  width: 305px;
}

::v-deep(.el-icon-date:before) {
  content: "";
}
::v-deep(.el-button) {
  width: 105px;
  height: 36px;
  line-height: 5px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(52, 184, 192, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  margin-top: 2px;
  border: 1px solid rgba(52, 184, 192, 1);
}
.label {
  margin-left: 104px;
}
.table {
  height: 700px;
}
.labelOne {
  margin-left: 24px;
}
.search {
  margin-left: 21px;
}
.reset {
  margin-left: 14px;
}
.download {
  margin-left: 320px;
}
::v-deep(.cell) {
  text-align: center;
}
::v-deep(.el-table th.el-table__cell) {
  background-color: rgb(185, 182, 182);
  color: black;
  font-weight: 300;
}
.page {
  width: 327px;
  height: 44px;
  /* background-color: rgb(148, 83, 83); */
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-around;
  float: right;
  margin-top: 20px;
}
.left,
.right {
  width: 80px;
  height: 24px;
  line-height: 24px;
  border: 1px solid rgb(175, 173, 173);
  border-radius: 12px;
  cursor: pointer;
  color: rgb(119, 115, 115);
  font-size: 14px;
}
.middle {
  color: rgb(119, 115, 115);
}
.middle span {
  color: aqua;
  margin: 0;
}
</style>